<template>
  <van-tabbar v-model="activeKey"
              :safe-area-inset-bottom="true"
              placeholder
              route>
    <!-- v-hasPermission="$item.permission" -->
    <van-tabbar-item :key="$item.img"
                     v-for="$item in NavBar"
                     :to="$item.href">
      <template #icon="props">
        <img style="width:22px;height: 22px;"
             :src="props.active ? proxy.$DynamicImg($item.img) : proxy.$DynamicImg($item.activeImg)"
             alt="" />
      </template>
      {{$item.title  }}
    </van-tabbar-item>
  </van-tabbar>
</template>

<script setup>
const { proxy } = getCurrentInstance()
const activeKey = ref(0)
const NavBar = [
  {
    title: '工作台',
    img: 'work.svg',
    activeImg: 'work-check.svg',
    permission: 'wecom|nav|workbench',
    href: '/workbench'
  },
  {
    title: '线索',
    img: 'clue.svg',
    permission: 'wecom|nav|clue',
    activeImg: 'clue-check.svg',
    href: '/clue/list'
  },
  {
    title: '试驾',
    img: 'test.svg',
    activeImg: 'test-check.svg',
    permission: 'wecom|nav|test-drive',
    href: '/test-drive/list'
  },
  {
    title: '订单',
    img: 'order.svg',
    permission: 'wecom|nav|order',
    activeImg: 'order-check.svg',
    href: '/order/list'
  }
]

onMounted(() => {
  Object.values(NavBar).forEach((e, ind) => {
    if (proxy.$router.currentRoute._value.href.includes(e.href)) {
      activeKey.value = ind
    }
  })
})
</script>
